<template>
	<scroll-view>
	<view>
		<nav-bar :title="exanmeData.typeName"  :titleColor="'black'" :color="'red'"></nav-bar>
		<view class="box">
			<scroll-view class="scroll-content"
			scroll-y
			style="height: 90vh;"
			@scrolltolower="onScrollToLower">
		    <view class="list" v-for="item in exanmeData.mealList" @click="appointMent(item)">
		        <view class="one">
		            <image :src="item.imagePath!= null ? url+item.imagePath.split(',')[0] : ''" style="
		           margin:16rpx 0 0 10rpx;width: 193rpx;
		            height: 150rpx;"></image>
		        </view>
		        <view class="two"style="margin-left:20rpx;">
		            <view class="center1">
		                {{item.setMealName}}
		            </view>
		            <view class="center2">
		               {{item.packageDescription? item.packageDescription : ''}}
		            </view>
		        </view>
		        <view class="three">
		            <view class="right1">¥{{item.price}}</view>
		            <view class="right2">
		                <view class="text">购买</view>
		            </view>
		        </view>
			</view>
	
			</scroll-view>
		     <image v-if="!exanmeData.mealList.length"  src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
		</view>
	
	</view>
	</scroll-view>
</template>

<script>
		import {baseUrl} from "@/config.js"
		import mine from "@/api/mine.js"
    export default {
        data() {
            return {
tiJianLIst:[
                    {
                    name:'儿童体检',
                    price:'',
                    path:'',
                    image:'/static/images2/男儿童医生.png',
                    jianInfo:'包含内科检查、外科检查、视力筛查五官检查，系统检查'
                },
                {
                    name:'女性全面体检',
                    price:'',
                    path:'',
                    image:'/static/images2/男儿童医生.png',
                    jianInfo:'包含内科检查、外科检查、视力筛查五官检查，系统检查'
                },
                {
                    name:'儿童体检',
                    price:'',
                    path:'',
                    image:'/static/images2/男儿童医生.png',
                    jianInfo:'包含内科检查、外科检查、视力筛查五官检查，系统检查'
                },
                {
                    name:'女性全面体检',
                    price:'',
                    path:'',
                    image:'/static/images2/男儿童医生.png',
                    jianInfo:'包含内科检查、外科检查、视力筛查五官检查，系统检查'
                },
                ],
			    exanmeData:{},
				typeId:null,
				url:"",
				pageNum:1,
				pId:null,
            }
        },
		mounted(){
			this.url = baseUrl
		},
		async onLoad(optsions){
		     console.log(optsions,"查询参数")
		                const data =  JSON.parse(decodeURIComponent(optsions.data));
			            this.exanmeData = data
						this.pId = data.id
					  const res =  await mine.getPackagesList({medicalExamType:data.id,pageNum:this.pageNum})
					    console.log(data,"参数6")
						console.log(res,"参数6")
						
						
						
						  this.exanmeData.mealList  =  res.rows
			 // this.typeId = Number(optsions)
			 //根据不同的id获取不同的数据列表
			     //this.getTypeList 
		},
        methods: {
		   async	onScrollToLower(){
				  this.pageNum++;
				  	  const res =  await mine.getPackagesList({medicalExamType:this.pId,pageNum:this.pageNum})
					  if(res.total<=this.exanmeData.mealList.length) return
					  this.exanmeData.mealList = [...this.exanmeData.mealList, ...res.rows];
			},
            appointMent(item) {
                uni.navigateTo({
                    // url: "/subPages/hosPacDetails/hosPacDetails",
                    url: `/subPages/meaDetail/meaDetail?data=${encodeURIComponent(JSON.stringify(item))}`,
                })
			
            },
			getTypeList(){
				   //获取数据列表
				   
			}
        }
    }
</script>

<style lang="scss">
    .box {
        width: 750rpx;
        
        background: #F7F8FA;
    }

    .list {
        display: flex;
        margin: 32rpx 32rpx 0;
        // border: 1rpx solid black;
        width: 686rpx;
        height: 190rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .onge {
        width: 193rpx;
        height: 150rpx;
        background: #F6F6F6;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        image {
            width: 193rpx;
            height: 150rpx;
        }
    }

    .center1 {
        margin-top: 24rpx;
        // width: 114rpx;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .center2 {
        margin-top: 10rpx;
        width: 323rpx;
        height: 68rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .right1 {
        margin: 38rpx 0rpx 0 25rpx;
        width: 110rpx;
        height: 36rpx;
        font-family: Douyin Sans, Douyin Sans;
        font-weight: bold;
        font-size: 30rpx;
        color: #EB5432;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .right2 {
        margin: 42rpx 0 0 48rpx;
        width: 92rpx;
        height: 52rpx;
        background: #159DFF;
        border-radius: 74rpx 74rpx 74rpx 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        width: 52rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
</style>